

var text = document.querySelector('input')
var sbtn = document.querySelector('.sous')
var flag = true

text.onmouseover =function(){
  flag = !flag

  if(flag){
    sbtn.style.display='block'
  }else{
    sbtn.style.display='none'
  }
}

// swiper插件
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 5,
  spaceBetween: 20,
  slidesPerGroup: 3,
  loop: true,
  loopFillGroupWithBlank: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 获取滚动条位置
// const li_top =$('')
// $('html,body').animate()({ scrollTop: })



// 放大镜！！！！！！！！
// 放大镜的构造函数
function Enlarge(select) {
  // select 表示范围元素的 选择器
  this.ele = document.querySelector(select)
  // show 盒子
  this.show = this.ele.querySelector('.page-top')
  // mask 盒子
  this.mask = this.ele.querySelector('.mask')
  // list 盒子
  this.list = this.ele.querySelector('.swiper-wrapper')
  // enlarge 盒子
  this.enlarge = this.ele.querySelector('.enlarge')
  // show 的宽度
  // 元素.offsetWidth 获取的是元素 内容 + padding + border 区域的尺寸
  // 注意: 当元素 display: none; 的时候获取不到尺寸
  this.show_width = this.show.offsetWidth
  // show 的高度
  this.show_height = this.show.offsetHeight
  // mask 的宽度
  // 获取元素非行内样式
  // window.getComputedStyle(元素).样式名
  this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
  // mask 的高度
  this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
  // 背景图 的宽度
  // 获取元素非行内样式
  this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
  this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])

  // 调用启动器就可以了
  this.init()
}

// 0. 启动器方法
Enlarge.prototype.init = function () {
  this.setScale()
  this.overOut()
  this.changeList()
  this.move()
}

// 1. 调整比例
Enlarge.prototype.setScale = function () {
  // 1-1. 计算出 enlarge 盒子的尺寸
  this.enlarge_width = this.bg_width * this.mask_width / this.show_width
  this.enlarge_height = this.bg_height * this.mask_height / this.show_height

  // 1-2. 给 this.enlarge 盒子赋值
  this.enlarge.style.width = this.enlarge_width + 'px'
  this.enlarge.style.height = this.enlarge_height + 'px'
}

// 2. 移入移出
/*
  this.show 绑定移入移出事件, 操作两个元素显示隐藏
*/
Enlarge.prototype.overOut = function () {
  // 2-1. 绑定鼠标移入事件
  console.log(111);
  this.show.addEventListener('mouseover', () => {
    this.mask.style.display = 'block'
    this.enlarge.style.display = 'block'
    console.log(222);
  })

  // 2-2. 绑定鼠标移出事件
  this.show.addEventListener('mouseout', () => {
    this.mask.style.display = 'none'
    this.enlarge.style.display = 'none'
  })
  console.log(333);
}

// 3. 列表切换
/*
  问题1: 给谁绑定事件 ?
    => 事件委托, 委托给谁 ?
    => 委托给 list
  问题2: 如何判断 target ?
    => 判断 target 是 img 标签
    => 才进行切换
  问题3: 把 show 盒子下面的 img 换成什么 ?
    => 把需要用到的图片地址, 以自定义属性的形式写在 img 标签身上
    => 当你点击的时候, 拿到 img 标签身上记录的两个自定义属性就好了
*/
Enlarge.prototype.changeList = function () {
  this.list.addEventListener('click', e => {
    // 处理事件对象兼容
    e = e || window.event
    // 处理事件目标兼容
    const target = e.target || e.srcElement

    if (target.nodeName === 'IMG') {
      const show_url = target.dataset.show
      const enlarge_url = target.dataset.show
      console.log(show_url,enlarge_url);

      // 更换地址
      this.show.firstElementChild.src = show_url
      this.enlarge.style.backgroundImage = `url(${ enlarge_url })`

      // 更换 p 标签的 active 类名
      // 给 list 的所有子元素取消 active
      for (let i = 0; i < this.list.children.length; i++) {
        this.list.children[i].classList.remove('active')
      }
      target.parentElement.classList.add('active')
    }
  })
}

Enlarge.prototype.move = function () {
  // 4-1. 给 this.show 绑定事件
  this.show.addEventListener('mousemove', e => {
    // 处理事件对象兼容
    e = e || window.event

    // 4-2. 拿到坐标点
    let x = e.offsetX - this.mask_width / 2
    let y = e.offsetY - this.mask_height / 2

    // 4-3. 边界值判断
    if (x <= 0) x = 0
    if (y <= 0) y = 0
    if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
    if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height

    // 4-4. 给 this.mask 进行 left 和 top 的赋值
    this.mask.style.left = x + 'px'
    this.mask.style.top = y + 'px'

    // 4-5. 让 enlarge 盒子的背景图片定位跟随成比例联动
    // 公式: 背景图移动距离 = mask 移动距离 * enlarge 盒子尺寸 / mask 盒子尺寸
    const bgx = x * this.enlarge_width / this.mask_width
    const bgy = y * this.enlarge_height / this.mask_height

    // 4-6. 给 enlarge 盒子的 backgroundPosition 赋值
    this.enlarge.style.backgroundPosition = `-${ bgx }px -${ bgy }px`
  })
}

